<template>
    <div class="cl1">
        <div class="iHead">平安县城建设推进小组成员</div>
        <div class="cont">
            <div class="cont-i" v-for="(i, o) in infoData[0]" :key="o">
                <div class="cont-i-l">{{ i[1] }} ：</div>
                <div class="cont-i-rs" v-if="o !== 3 && o !== 5">
                    <div class="cont-i-r" v-for="(n, m) in i" :key="m">
                        <p v-if="m !== '1'">{{ n }}</p>
                    </div>
                </div>
                <div class="cont-i-b " v-else>
                    <el-button type="primary" @click="chengyuanShow = true" size="mini" v-if="o == 3">查看全部成员</el-button>
                    <el-button type="primary" @click="bgschengyuanShow = true" size="mini"
                        v-if="o == 5">查看办公室成员</el-button>
                </div>
            </div>
        </div>
        <el-dialog title="全部成员" :visible.sync="chengyuanShow" width="600">
            <div class="ry">
                <div class="ry-i" v-for="(i, o) in infoData[0][3]" :key="o">
                    <p v-if="o !== '1'">{{ i }}</p>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="办公室成员" :visible.sync="bgschengyuanShow" width="600">
            <div class="ry">
                <div class="ry-i" v-for="(i, o) in infoData[0][5]" :key="o">
                    <p v-if="o !== '1'">{{ i }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['infoData'],
    data() {
        return {
            bgschengyuanShow: false,
            chengyuanShow: false,
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.cl1 {
    width: 400px;
    height: 620px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 620px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .cont {
        position: relative;
        z-index: 2;
        margin-top: 40px;
        color: #fff;

        .cont-i {
            display: flex;
            margin-bottom: 20px;

            .cont-i-l {
                text-shadow: 0 0 8px #000;
                width: 100px;
            }

            .cont-i-rs {
                .cont-i-r {
                    text-shadow: 0 0 8px #000;
                    margin-bottom: 5px;
                }

                .cont-i-r:first-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }

    .ry {
        display: flex;
        flex-wrap: wrap;

        .ry-i {
            width: 80px;
            text-align: center;
            margin: 5px 0;
        }

        .ry-i:first-of-type {
            display: none;
        }
    }
}
</style>